<template>
  <div>
    <div class="header-Main" style="margin-top: 10px; margin-left: 5px;"> 
      <el-input v-model="name" placeholder="输入内容" suffix-icon="el-icon-search" style="width: 500px;"></el-input>
      <el-button type="primary" style="margin: 0 20px 0 5px;" @click="handlget">查询</el-button>
      <el-button type="primary">
        <div @click="add" style="color: aliceblue;">增加<i class="el-icon-circle-plus-outline iconadd"
            style="font-size: 15px;"></i></div>
        </el-button>
    </div>
  
    <div>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
          border style="width: 100%">
  
        <el-table-column prop="id" label="ID">
  
        </el-table-column>
  
        <el-table-column prop="name" label="标签名">
        </el-table-column>
  
  
        <el-table-column prop="date" label="创建时间">
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>


        <el-table-column prop="isDelete" label="是否禁用">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isDelete" active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
  
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit"  circle @click="handlEditor(scope.row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="handlDelete(scope.row.id)"></el-button>
          </template>
        </el-table-column>
  
      </el-table>
  
      <div class="pageion"> 
        <pagination :total="total" :PageSize="PageSize" :PageNum="PageNum" 
          @ChangeSize="changesize" @ChangeNum="changenum"></pagination>
      </div>
    </div>
<!--   
      <div v-else>
  
      </div> -->
  </div>
</template>
  
  <script>
  import pagination from '@/components/Pagination/index.vue'
  import { mapState,mapMutations} from 'vuex'
  export default {
    components:{
      pagination,
    },
    data() {
        return {
          singerId:'',
          name:'',
          id: 1,
          tableData: [],
          total:10,
          PageSize:10,
          PageNum:1,
          toggle:''          
        }
      },
    methods:{
      ...mapMutations('SongDatas',['changeTitle','changeDatas']),
      ...mapMutations('music',['changeIsplay','getUrl']),
      changesize(val){
          this.PageSize=val
          this.getAll()
        },
        changenum(val){
          this.PageNum=val
          this.getAll()
        },
        add(){
          this.changeTitle("添加")
          this.$router.push("/addtag")
        },
        async getAll(){
            const res = await this.$axios.post(`tag/SelectPage?pageNum=${this.PageNum}&pageSize=${this.PageSize}&name=${this.name}`)
            console.log(res)
            if(res != null){
              this.tableData = res.data
              this.total = res.total
            }
        },
        handlget(){
          this.getAll()
        },
        async handlDelete(val){
          const res = await this.$axios.delete(`tag/DeleteTag/${val}`)
          console.log(res)
          if(res.code == "200"){
            this.$message.success(res.msg)
          }
          else{
            this.$message.error(res.msg)
          }
          this.getAll()
        },
        async handlEditor(val){
          const res = await this.$axios.get(`Song/SelectBySongId/${val}`)
          console.log(res)
          this.changeTitle("编辑")
          this.changeDatas(res)
          this.$router.push("/addtag")
        },
  
        parselyric(text){
          let line = text.split("\n")
          let parren = /\[\d{2}:\d{2}.(\d{3}|\d{2})\]/g
          let resut = []
          for(let item of line){
            let value = item.replace(parren,'')
            resut.push(value)
          }
          return resut
        },
        musicplay(url,id){
          if(this.toggle == id){
            this.toggle =-1
            this.changeIsplay(false)
          }
          else{
            this.toggle = id
            this.changeIsplay(true)
            this.getUrl(url)
          }
        }
    },
  
    computed:{
      ...mapState('song1',['SingerId']),
      ...mapState('music',['url','isPlay'])
    },
    created(){
      this.getAll()
    }
  
  }
  </script>
  
  <style scoped lang="less">
  .header-Main{
    margin-bottom: 10px;
  }
  
  .iconadd{
    display: inline-block;
    font-size: 5px;
    padding-left: 5px;
  }
  
  .pageion{
    display: flex;
    margin-top: 30px;
    justify-content: center;
  }
  
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
      height: 150px;
      overflow-y: scroll;
  
    }
    ::v-deep .el-table th{
      text-align: center;
    }
    ::v-deep .el-table td, .el-table th {
      text-align: center;
    }
    .imagecontainer{
      height: 140px;
      width: 140px;
    }
  
  .play{
    position: absolute;
    z-index: 99;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%,50%);
  }
  .play span{
    font-size: 50px;
  }
  
  .play span:hover{
    background-color: #b3b0b0;
  }
  </style>